<template>
  <el-dialog title="客户预约" width="40%" :before-close="dialogClose" :visible.sync="show">
      <el-form ref="form" label-width="100px">
          <el-form-item label="选择项目">
              <el-select v-model="cardIndex" placeholder="选择项目" @change="cardSelect">
                <el-option v-for="(item,index) in myCard" :key="index" :label="item.card_name" 
                :value="index"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="预约日期" style="margin-top:20px;">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择预约日期" 
                class="select_option1"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
          </el-form-item>
          <el-form-item label="开始时间">
              <el-select v-model="timeIndex" placeholder="开始时间" @change="timeSelect">
                <el-option v-for="(item,index) in stime" :key="index" :label="item" 
                :value="index"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="结束时间">
              <el-select v-model="form.etime" placeholder="结束时间">
                <el-option v-for="(item,index) in etime" :key="index" :label="item" 
                :value="item"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="选择美容师">
              <el-select v-model="form.user_id" placeholder="选择美容师">
                <el-option v-for="(item,index) in user" :key="index" :label="item.realname" 
                :value="item.uid"></el-option>
              </el-select>
          </el-form-item>
          <div align="center" style="margin-top:20px;">
            <el-button type="primary" @click="addSubmit">确 定</el-button>
            <el-button @click="dialogClose">取 消</el-button>
          </div>
      </el-form>
  </el-dialog>
</template>
 
<script>
export default {
  name: 'addMark',
  props:['show','id','myCard','user'],
  data() {
    return {
        form:{},
        stime:['请选择','9:00','9:30','10:00','10:30','11:00','11:30','12:00','12:30',
			    '13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00',
			    '17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00'],
        etime:['9:00','9:30','10:00','10:30','11:00','11:30','12:00','12:30',
			    '13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00',
			    '17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00'],
        cardIndex:0,
        timeIndex:0
    }
  },
  created: function(){
    
  },
  methods: {
    dialogClose:function(){
      this.$emit("func",{'key':'addMark'})
    },
    cardSelect:function(e){
      var item = this.myCard[e]
      this.form.order_id = item.id
			this.form.card_id = item.card_id
    },
    timeSelect:function(e){
      this.form.stime = this.stime[e]
			let len = this.etime.length - (this.stime.length - e - 1);
			this.etime.splice(0,len)
    },
    addSubmit:function(){
      if(!this.form.date){
        this.$message.error('请选择预约日期!!');
        return;
			}
      if(!this.form.stime || !this.form.etime){
        this.$message.error('请选择开始和结束时间!!');
        return;
			}
      this.form.member_id = this.id
      this.form.oa_id = localStorage.getItem('oa_id')
      var that = this
      this.$post('manage/mark/add',this.form).then((res) => {
          if(res.code == 1){
            that.$message.success('预约成功!!')
            that.$emit("func",{'key':'addMark','update':1})
          }else{
            that.$message.error(res.msg);
          }
      })
    }
  }
}
</script>
<style>

</style>